<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>天网</title>
    <link rel="stylesheet" href="/stylesheets/index.css">
    <script type="text/javascript" src="/socket.io/socket.io.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
  </head>
  <body>
      <div class="container">
        <%include header.ejs %>
        <%include ArticleList.ejs %>
        <%include chat.ejs %>
        <%include leave.ejs %>
      </div>


      <script type="text/javascript">
      let currentContent = $(".article");
      let aDoms = document.querySelectorAll(".menu_div > a");
      let createArticle = document.querySelector("a.createArticle");
      aDoms[1].style.fontWeight = "bolder";
        let preDom = aDoms[1];
            //导航栏点击事件
      aDoms.forEach(item => {
        item.addEventListener("click", function() {
          clickNav(item);
        });
      });

      function clickNav(item) {
        let authername;
        let menu = item.innerText;
        if (menu == "聊天室") {
          <%if (!user) {%>
            alert("请登录!");
            return;
          <%}%>
          $(".chat").addClass("selectdiv");
          $.get("/chat_nav", e => {
            let list = e.chatMsgs;
            authername = e.user.name;
            $(".chatlist").html("");
            list.forEach(chat => {
              if (chat.auther == e.user.name) {
                $(".chatlist").append($(`
                   <p style="padding-left:5px;background-color:SkyBlue"><span>${chat.auther}</span>：${chat.msg}</p>`));
              }else {
                $(".chatlist").append($(`
                   <p style="padding-left:5px;"><span>${chat.auther}</span>：${chat.msg}</p>`));
              }
            })
          })

          const socket = io.connect();
          socket.on("back",res=>{
            if (res.name == authername) {
              $(".chatlist").append($(`
                 <p style="padding-left:5px;background-color:SkyBlue"><span>${res.name}</span>：${res.msg}</p>`));
            }else {
              $(".chatlist").append($(`
                 <p style="padding-left:5px;"><span>${res.name}</span>：${res.msg}</p>`));
            }
            $("input[name=chat]").val("");
          });

          $("input[name=chat]").change(e => {
            socket.emit("say",{msg:event.target.value,name:authername});
          })
        }else if(menu == "留言板"){
          $(".leave").addClass("selectdiv");
          $.get("/leave_nav", e => {
            let list = e.leaveMsgs;
            $(".leave_content").html("");
            list.forEach(leave => {
              $(".leave_content").append($(`
                 <p style="padding-left:5px"><span>${leave.auther}</span>：${leave.msg}  -${leave.createData}</p>`));
            })
          })
        }else {
          $(".article").addClass("selectdiv");
        }

      if (preDom) {
        preDom.style.fontWeight = "normal";
        preDom
      }
      preDom = item;
      item.style.fontWeight = "bolder";
      if (currentContent) {
        currentContent.removeClass("selectdiv");
      }
      currentContent = $(".selectdiv");

      }

      <%if(msg){%>
        alert('<%= msg%>');
      <%}%>

      </script>
      <script type="text/javascript" src="/js/leave.js"></script>
      <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
      <script type="text/javascript" src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.js"></script>
      <script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  </body>
</html>
